<template>
<div>
    <span>用户名：超管专用机构</span><span>ID:CGZY123</span><span>上次登录时间：2020年8月7日  10:33:21</span>
</div>
<div class="one">
  <div class="one_one"></div>
  <div class="one_two"></div>
  <div class="one_three"></div>
  <div class="one_four"></div>
</div>
<div class="two">
  <div id="two_one"></div>
  <div class="two_two"></div>
  <div class="two_three"></div>
</div>
<div class="three">
    <div class="three_one"></div>
    <div class="three_two"></div>
    <div class="three_three"></div>
</div>
</template>

<script lang="ts">
      import { inject,onMounted } from 'vue';
      export default{

          setup(){
            let $echarts:any=inject("echarts")   
            //  console.log($echarts)
            onMounted(()=>{
                   let myChart_two=$echarts.init(document.getElementById("two_one"))  
                   myChart_two.setOption({
                           xAxis:{
                             data:['日化']
                           },
                           yAxis:{
                             
                           },
                           series:[{
                            type:"candlestick",
                            data:[[20,34,10,38]]
                           }
                           
                           ]
                   })
            })
      
            return{
                 $echarts
            }
          }
      }
</script>

<style scoped>
.one{
     display: flex;
width: 1300px;
    justify-content: space-around;

}
.one_one{
    width: 154px;
    height: 110px;
    border: 1px solid red;
}
.one_two{
      width: 320px;
      height: 110px;
      border: 1px solid red;
}
.one_three{
      width: 320px;
      height: 110px;
      border: 1px solid red;
}
.one_four{
      width: 320px;
      height: 110px;
      border: 1px solid red;
}
.two{
     width: 1300px;
     height: 216px;
     display: flex;
     justify-content: space-around;
     margin-top: 10px;
}
#two_one{
        width: 465px;
        height: 218px;
        border: 1px solid red;
}
.two_two{
        width: 347.5px;
        height: 218px;
        border: 1px solid red;
}
.two_three{
        width: 347.5px;
        height: 218px;
        border: 1px solid red;
}
.three{
     width: 1300px;
     height: 216px;
     display: flex;
     justify-content: space-around;
     margin-top: 10px;
}
.three_one{
    width: 465px;
        height: 218px;
        border: 1px solid red;
}
.three_two{
    width: 465px;
        height: 218px;
        border: 1px solid red;
}
.three_three{
        width: 237.5px;
        height: 218px;
        border: 1px solid red;

}
</style>